<template>
  <a-form
    ref="formRef"
    :model="form"
    :rules="rules"
    :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
    :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
  >
    <a-form-item label="主题:" name="title" required>
      <a-input v-model:value="form.title" placeholder="请输入主题" allow-clear :maxlength="32" />
    </a-form-item>

    <a-form-item label="子主题:" name="subTitle">
      <a-input v-model:value="form.subTitle" placeholder="请输入子主题" allow-clear />
    </a-form-item>

    <a-form-item label="消息主体内容:" name="body" required>
      <a-textarea
        v-model:value="form.body"
        placeholder="请输入消息主体内容"
        allow-clear
        :maxlength="300"
      />
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
const props = defineProps<{
  form: Object;
}>();

// 验证规则
const rules = reactive({
  roleName: [{ required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }],
  roleCode: [{ required: true, message: '请输入角色编码', type: 'string', trigger: 'blur' }],
  roleSort: [{ required: true, message: '请输入排序号', type: 'number', trigger: 'blur' }],
});
</script>
